import React, { useEffect, useState } from "react";
import { get_floor } from "../api";
import style from "../style/floor.module.css";

function Floor() {
  const [floor, setFloorData] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    (async () => {
      try {
        let res = await get_floor();
        console.log(res, "floor");
        if (res.data.code === 200) {
          setFloorData(res.data.data.list);
        }
      } catch (error) {
        console.error("Error fetching floor data:", error);
      }
    })();
  }, []);

  const handlePrev = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex === 0 ? floor.length - 1 : prevIndex - 1
    );
  };

  const handleNext = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex === floor.length - 1 ? 0 : prevIndex + 1
    );
  };

  return (
    <div className={style.Container}>
      <div className={style.ArrowLeft} onClick={handlePrev}>
        &lt;
      </div>
      <div className={style.box1}>
        <div
          className={style.box}
          style={{ transform: `translateX(-${currentIndex * 206}px)` }}
        >
          {floor.map((item, index) => (
            <div key={index} className={style.Title}>
              <h3>{item.title}</h3>
            </div>
          ))}
        </div>
      </div>

      <div className={style.ArrowRight} onClick={handleNext}>
        &gt;
      </div>
    </div>
  );
}

export default Floor;
